<template>
  <f7-page>
    <f7-navbar title="单选复选" back-link></f7-navbar>
    <div class="tien-bar bg-white border-bottom">
      <div class="action">
        <span class="tien-icon-title text-orange"></span> 单选
      </div>
    </div>
    <div class="tien-form-group">
      <label class="tien-radio">
        <input type="radio">
        <i class="icon"></i>
        <span class="text">单选</span>
      </label>
      <label class="tien-radio">
        <input type="radio" checked>
        <i class="icon"></i>
        <span class="text">单选</span>
      </label>
      <label class="tien-radio">
        <input type="radio" disabled>
        <i class="icon"></i>
        <span class="text">单选</span>
      </label>
      <label class="tien-radio">
        <input type="radio" disabled checked>
        <i class="icon"></i>
        <span class="text">单选</span>
      </label>
    </div>
    <div class="tien-form-group">
      <label class="tien-radio tick">
        <input type="radio">
        <i class="icon"></i>
        <span class="text">单选（勾）</span>
      </label>
      <label class="tien-radio tick-o">
        <input type="radio">
        <i class="icon"></i>
        <span class="text">单选（勾-线条）</span>
      </label>
    </div>

    <div class="tien-form-group">
      <label class="tien-radio tick red">
        <input type="radio">
        <i class="icon"></i>
        <span class="text">单选（勾）</span>
      </label>
      <label class="tien-radio tick-o blue">
        <input type="radio">
        <i class="icon"></i>
        <span class="text">单选（勾-线条）</span>
      </label>
    </div>

    <div class="tien-bar bg-white margin-top border-bottom">
      <div class="action">
        <span class="tien-icon-title text-orange"></span> 复选
      </div>
    </div>
    <div class="tien-form-group">
      <label class="tien-checkbox">
        <input type="checkbox">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox">
        <input type="checkbox" disabled>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox">
        <input type="checkbox" disabled checked>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
    </div>
    <div class="tien-form-group">
      <label class="tien-checkbox red">
        <input type="checkbox">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox blue">
        <input type="checkbox" checked>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox green">
        <input type="checkbox" disabled>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox">
        <input type="checkbox" disabled checked>
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
    </div>

    <div class="tien-form-group">
      <label class="tien-checkbox bedye">
        <input type="checkbox">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox bedye red">
        <input type="checkbox" checked="checked">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox square">
        <input type="checkbox">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
      <label class="tien-checkbox square red checked">
        <input type="checkbox" checked="checked">
        <i class="icon"></i>
        <span class="text">复选</span>
      </label>
    </div>
  </f7-page>
</template>

<script>
import "../../css/colorui/icon/icon.css";
import "../../css/colorui/form.css";
import "../../css/colorui/checkbox.css";
export default {
  name: "checkbox",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

